<template>
  <div class="comment-framework">
    <div class="comment-box">
      <div class="tit">
        评论区
      </div>
      <div class="content">
        <div class="post">

        </div>
        <comment-item v-for="item in comments" :key="item.id" :comment="item" ref="rootComment"
                      :reply-dialog-visible="true"
                      @closeReplyInput="closeReply"
                      @openReplyDialog="openReplyDialog"></comment-item>
        <el-empty v-if="comments.length === 0" description="评论区空空如也…"></el-empty>
      </div>
    </div>
    <el-dialog
        custom-class="reply-dialog"
        top="8vh"
        title="查看评论"
        :visible.sync="replyDialogVisible"
    >
      <div class="replyList">
        <div class="commentTop">
          <comment-item ref="replyTop" :reply-dialog-visible="false" @closeReplyInput="closeInnerReply"
                        :comment="rootReply"></comment-item>
        </div>
        <div class="reply-body">
          <comment-item ref="replyList" :reply-dialog-visible="false" @closeReplyInput="closeDialogReplyInput"
                        v-for="item in replys" :comment="item"
                        :key="item.id"></comment-item>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CommentBox",
  props:{
    comments:[]
  }
}
</script>

<style scoped>

.comment-box {
  background-color: #FFFFFF;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.comment-box .tit {
  font-size: 15px;
  font-weight: bold;
  padding: 8px 16px;
  border-bottom: 1px dotted #DEDEDE;
}
</style>
